header{
	width: 100%;
	height: 50px;
	background:rgba(0,0,0,0.5);
	color:#fff;
	font-size:14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 2% 0 4%;
	box-sizing: border-box;
	position: fixed;
	top:0;
	left:0;
}
header >a{
	color:#fff;
}
header >a >img{
	width: 150px;
	height: 50px;
}
header .nav{
	font-size:16px;
	width: 500px;
	height: 50px;
	line-height: 50px;
}
header .nav >a{
	color:#fff;
	padding:0 3%;
}
.banner{
	width: 100%;
	height: 250px;
	background: url(../imgs/top-bg.png) no-repeat center top;
	background-size: cover;
}









@media only screen and (min-width: 0px) and (max-width:450px) {
	header .nav{
		display: none;
	}
	.imgBox{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.imgBox >p:nth-child(1){
		width: 100%;
		padding:2%;
		box-sizing: border-box;
	}
	.imgBox >p:nth-child(1) img{
		width: 100%;
		height: 100%;
	}
	.imgBox >p:nth-child(2){
		width: 50%;
		padding: 0 2%;
		box-sizing: border-box;
	}
	.imgBox >p:nth-child(2) img{
		width: 100%;
		height: 100%;
	}
	.imgBox >p:nth-child(3){
		width: 50%;
		padding: 0 2%;
		box-sizing: border-box;
	}
	.imgBox >p:nth-child(3) img{
		width: 100%;
		height: 100%;
	}
	.content{
		width: 100%;
		padding:2%;
		box-sizing: border-box;
	}
	.content >li{
		width: 100%;
		border:1px solid #000;
		padding:2%;
		box-sizing: border-box;
		margin-bottom: 2%;
	}
	.content >li >img{
		width: 100%;
		/*height: 230px;*/
	}
}
@media only screen and (min-width: 451px) and (max-width:768px) {
	header .nav{
		display: none;
	}
	.imgBox{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.imgBox >p:nth-child(1){
		width: 100%;
		padding:2%;
		box-sizing: border-box;
	}
	.imgBox >p:nth-child(1) img{
		width: 100%;
		height: 100%;
	}
	.imgBox >p:nth-child(2){
		width: 50%;
		padding: 0 2%;
		box-sizing: border-box;
	}
	.imgBox >p:nth-child(2) img{
		width: 100%;
		height: 100%;
	}
	.imgBox >p:nth-child(3){
		width: 50%;
		padding: 0 2%;
		box-sizing: border-box;
	}
	.imgBox >p:nth-child(3) img{
		width: 100%;
		height: 100%;
	}
	.content{
		width: 100%;
		padding:2%;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
	}
	.content >li{
		width: 49%;
		border:1px solid #000;
		padding:2%;
		box-sizing: border-box;
		margin-bottom: 2%;
		margin-right: 1%;
	}
	.content >li:nth-child(2n){
		margin-right: 0;
	}
	.content >li >img{
		width: 100%;
		/*height: 230px;*/
	}
}
@media only screen and (min-width: 769px) and (max-width:1024px) {
	header >p{
		display: none;
	}
	.imgBox{
		width: 100%;
		display: flex;
		/*flex-wrap: wrap;*/
	}
	.imgBox >p:nth-child(1){
		width: 100%;
		padding:1%;
		box-sizing: border-box;
	}
	.imgBox >p:nth-child(1) img{
		width: 100%;
		height: 100%;
	}
	.imgBox >p:nth-child(2){
		width: 50%;
		padding: 1%;
		box-sizing: border-box;
	}
	.imgBox >p:nth-child(2) img{
		width: 100%;
		height: 100%;
	}
	.imgBox >p:nth-child(3){
		width: 50%;
		padding: 1%;
		box-sizing: border-box;
	}
	.imgBox >p:nth-child(3) img{
		width: 100%;
		height: 100%;
	}
	.content{
		width: 100%;
		padding:2%;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
	}
	.content >li{
		width: 32%;
		border:1px solid #000;
		padding:2%;
		box-sizing: border-box;
		margin-bottom: 2%;
		margin-right: 1%;
	}
	.content >li:nth-child(3n){
		margin-right: 0;
	}
	.content >li >img{
		width: 100%;
		/*height: 230px;*/
	}
}
@media only screen and (min-width: 1025px) {
	header >p{
		display: none;
	}
	.imgBox{
		width: 100%;
		display: flex;
		/*flex-wrap: wrap;*/
	}
	.imgBox >p:nth-child(1){
		width: 100%;
		padding:1%;
		box-sizing: border-box;
	}
	.imgBox >p:nth-child(1) img{
		width: 100%;
		height: 100%;
	}
	.imgBox >p:nth-child(2){
		width: 50%;
		padding: 0 1%;
		box-sizing: border-box;
	}
	.imgBox >p:nth-child(2) img{
		width: 100%;
		height: 100%;
	}
	.imgBox >p:nth-child(3){
		width: 50%;
		padding: 0 1%;
		box-sizing: border-box;
	}
	.imgBox >p:nth-child(3) img{
		width: 100%;
		height: 100%;
	}
	.content{
		width: 100%;
		padding:2%;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
	}
	.content >li{
		width: 24%;
		border:1px solid #000;
		padding:2%;
		box-sizing: border-box;
		margin-bottom: 2%;
		margin-right: 1%;
	}
	.content >li:nth-child(4n){
		margin-right: 0;
	}
	.content >li >img{
		width: 100%;
		/*height: 230px;*/
	}
}